<template>
  <div class="app-container" v-loading="loading">
    <!-- 供应商信息 -->
    <supplierInformation ref="supplierInformation" v-model="form" state='detail' />
    <!-- 申请信息 -->
    <cationInformation ref="cationInformation" v-model="form" state='detail' />
    <!-- 收车信息 -->
    <receivingInformation ref="receivingInformation" v-model="form" state='detail' />
    <!-- 付款申请记录 -->
    <paymentRequest ref="paymentRequest" v-model="form" state='detail' />
    <!-- 撤销更换供应商信息 -->
    <cancelTheChangeSupplier ref="cancelTheChangeSupplier" v-model="form" state='detail' />
    <!-- 更换供应商申请审批进度 -->
    <cancelTheChangeSupplierProgress ref="cancelTheChangeSupplierProgress" v-model="form" state='detail' />
    <div style="text-align: right;box-sizing: border-box;padding-right: 20px;margin-top: 20px; background-color: #fff;width: 100%;height: 60px;line-height: 60px;border-radius: 8px;">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import supplierInformation from "./components/supplierInformation"
import cationInformation from "./components/cationInformation"
import receivingInformation from "./components/receivingInformation"
import paymentRequest from "./components/paymentRequest"
import cancelTheChangeSupplier from "./components/cancelTheChangeSupplier"
import cancelTheChangeSupplierProgress from "./components/cancelTheChangeSupplierProgress"
import { getSupplierInfoDetail } from "@/api/pickUpTheCar";
export default {
  // 收车供应商详情
  name: 'ReceivingSupplierDetails',
  components: {
    supplierInformation,
    cationInformation,
    receivingInformation,
    paymentRequest,
    cancelTheChangeSupplier,
    cancelTheChangeSupplierProgress
  },
  data() {
    return {
      loading: false,
      form: {}
    };
  },
  created() {
    this.getSupplierInfoDetail()
  },
  methods: {
    async getSupplierInfoDetail() {
      this.loading = true;
      try {
        let { data } = await getSupplierInfoDetail(this.$route.query.id)
        this.form = data
        this.loading = false;
      } catch (error) {

      }
    },
    back() {
      this.$tab.closeOpenPage(this.$route);
      this.$router.go(-1)
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll(".el-form-item__error")[0];
        el.scrollIntoView({ block: "center", behavior: "smooth" });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto !important;
}
</style>
